
<template>
  <div id="example2" class="ht-theme-main">
    <hot-table
      :id="id"
      :class="className"
      :style="style"
      ref="hotTable"
      :data="hotData"
      :settings="settings"
    >
      <!-- <hot-column title="ID" data="id"> </hot-column>
      <hot-column :settings="secondColumnSettings"  data="name">
      </hot-column>
      <hot-column title="Price" data="payment.price"> </hot-column>
      <hot-column title="Currency" data="payment.currency"> </hot-column> -->
    </hot-table>
    <el-button @click="upateData">更新数据</el-button>
  </div>
</template>
<script>
import { HotTable, HotColumn } from "@handsontable/vue";
import { ContextMenu } from "handsontable/plugins/contextMenu";
export default {
  components: { HotTable, HotColumn },
  data() {
    return {
      hotData: [
        {
          id: 1,
          name: "Table tennis racket",
          payment: { price: 13, currency: "PLN" },
          inStock: false,
          sex:'男'
        },
        {
          id: 2,
          name: "Outdoor game ball",
          payment: { price: 14, currency: "USD" },
          inStock: true,
           sex:'女'
        },
        {
          id: 3,
          name: "Mountain bike",
          payment: { price: 300, currency: "USD" },
          inStock: false,
           sex:'女'
        },
      ],
      secondColumnSettings: {
        title: "Second column header",
        // readOnly:true
      },
      settings: {
        columns: [
          {
            title: "选择",
            type: "checkbox",
            data: "inStock",
            className: "htCenter",
          },
          {
            title: "名称",
            data: "name",
          },
          {
            title: "价格",
            data: "payment.price",
          },
          {
            title: "国家",
            data: "payment.currency",
          },
          {
            title:'性别',
      type: 'select',
      selectOptions: ['男', '女'],
      data:'sex'
    },
        ],
        columnSorting: true,
        stretchH: "all",
        colHeaders: true,
        height: "auto",
        autoWrapRow: true,
        autoWrapCol: true,
        licenseKey: "non-commercial-and-evaluation",
        contextMenu: {
          items: {
            row_above: {
              name: "Insert row above this one (custom name)",
            },
            row_below: {},
            separator: ContextMenu.SEPARATOR,
            clear_custom: {
              name: "Clear all cells (custom)",
              callback() {
                this.clear();
              },
            },
          },
        },
        // cells: (row, col) => {
        //   return row === 1 || row === 4 ? { readOnly: true } : {};
        // },
        dropdownMenu: true,
        // hiddenColumns: {
        //   indicators: true,
        // },
        multiColumnSorting: true,
        filters: true,
        rowHeaders: true,
        manualRowMove: true,
      },
      id: "my-custom-id",
      className: "my-custom-classname",
      style: "height: 142px; overflow: hidden; border: 1px solid red;",
    };
  },
  methods: {
    upateData() {
      console.log("this.hotData", this.hotData);
      // this.$nextTick(()=>{
      //     this.hotData = this.hotData.map(val=>{
      //     return {...val,
      //         id:val.id+1
      //     }
      // })
      // console.log('this.hotData',this.hotData )
      // })

      // let hotData = this.hotData.map((val) => {
      //   return { ...val, id: val.id + 1 };
      // });
      //   this.$set(this, "hotData", hotData);

      // const hot = this.$refs.hotTable.hotInstance;
      // hot.loadData(hotData);
    },
  },
};
</script>